html,
body,
div,
ul,
li,
h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

a {
  color: #000;
}

:root {
  --ev-c-white: #ffffff;
  --ev-c-white-soft: #f8f8f8;
  --ev-c-white-mute: #f2f2f2;

  --ev-c-black: #1b1b1f;
  --ev-c-black-soft: #222222;
  --ev-c-black-mute: #282828;

  --ev-c-gray-1: #515c67;
  --ev-c-gray-2: #414853;
  --ev-c-gray-3: #32363f;

  --ev-c-text-1: rgba(255, 255, 245, 0.86);
  --ev-c-text-2: rgba(235, 235, 245, 0.6);
  --ev-c-text-3: rgba(235, 235, 245, 0.38);

  --ev-button-alt-border: transparent;
  --ev-button-alt-text: var(--ev-c-text-1);
  --ev-button-alt-bg: var(--ev-c-gray-3);
  --ev-button-alt-hover-border: transparent;
  --ev-button-alt-hover-text: var(--ev-c-text-1);
  --ev-button-alt-hover-bg: var(--ev-c-gray-2);
}

:root {
  --color-background: var(--ev-c-black);
  --color-background-soft: var(--ev-c-black-soft);
  --color-background-mute: var(--ev-c-black-mute);

  --color-text: var(--ev-c-text-1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

html,body,div,p,ul,li{
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

body {
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url('./wavy-lines.svg');
}

#app {
  width: 100vw;
  height: 100vh;
}



$color_1: #fff;
$color_2: #f00;
$color_3: #000;
$background_color_1: #fff;
$background_color_2: #ffe87f;
$background_color_3: rgba(0, 0, 0, 0.5);
$background_color_4: #f0f0f0;

// 单行溢出省略
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 不要选择文字
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}

// 居中
.middle{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
    // border: 2px solid orange;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.content-title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}

.content-top{
  display: flex;
  justify-content: space-between;
}
.content-add{
  cursor: pointer;
}


.icon-list {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 100px;
    height: 100px;
    cursor: pointer;
    padding: 10px;

    .iconfont {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      margin: 3px auto;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .word {
      text-align: center;
      font-size: 12px;
    }
  }
}
